<template>
  <div>
    <div class="field" draggable="true" @dragstart="dragStart($event, field, sheetName)">
      <span>{{ field }}</span>
      <span class="more" @click="showMore">
        <img src="@/assets/image/common/更多.png" />
        <div class="moreBox" v-show="moreHasShow">
          <div @click="showChangeFieldBox">修改字段</div>
          <div @click="removeFieldBoxVisible = true">删除字段</div>
        </div>
      </span>
    </div>
    <el-dialog title="修改字段名" :visible.sync="changeFieldNameBoxVisible" width="30%">
      <el-input placeholder="请输入字段名" v-model="newField"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeFieldNameBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeFieldName">确 定</el-button>
      </span>
    </el-dialog>

      <el-dialog title="删除字段" :visible.sync="removeFieldBoxVisible" width="30%">
      <span>您确定要删除"{{field}}"字段吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeFieldBoxVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeField">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["field", "sheetName"],

  data() {
    return {
      newField: '',
      moreHasShow: false,
      changeFieldNameBoxVisible: false,
      removeFieldBoxVisible: false,

    };
  },
  methods: {
    showMore() {
      this.moreHasShow = !this.moreHasShow;
    },
    showChangeFieldBox(){
      this.newField = this.field
      this.changeFieldNameBoxVisible = true
    },
    changeFieldName(){
      if(this.newField == ''){
        this.$message.error("请填写字段名！")
        return
      }

      else if(this.field == this.newField){
        this.$message.error("修改的字段名不能与之前的字段名重复！")
        return
      }

      this.$emit('change-field-name', this.field, this.newField)

      this.changeFieldNameBoxVisible = false
    },
    dragStart($event, field, sheetName){
      $event.dataTransfer.setData('field', field)
      $event.dataTransfer.setData('sheetName', sheetName)
    },
    removeField(){
      this.$emit('remove-field', this.field)
      this.removeFieldBoxVisible = false
    }
  },
};
</script>

<style scoped>
.field {
  display: flex;
  justify-content: space-between;
  padding: 8px 20px 8px 20px;
}

.field:hover {
  background-color: rgb(131, 129, 129);
}

/* .field > div:hover{
       background-color: rgb(172, 161, 161);
    } */

.field span > img {
  width: 20px;
}

.more {
  position: relative;
}

.more > .moreBox {
  width: 150px;
  color: black;
  background-color: white;
  position: absolute;
  left: -112px;

  z-index: 5;
}

.moreBox > div {
  text-align: center;
  padding: 8px;
}

.moreBox > div:hover {
  background-color: rgb(56, 56, 56);
}
</style>